<template>
  <el-row>
    <el-col>
      <el-form :inline="true" :model="formInline" size="small">
        <el-form-item>
          <el-input v-model="formInline.keyword" style="width: 215px" placeholder="角色搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="clickSelect">查询</el-button>
          <el-button type="primary" @click="add">添加</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col style="min-height: 500px">
      <vxe-table
              :data="tableData"
              :row-config="{isHover: true}"
              :header-cell-style="{'text-align':'center'}"
              :stripe="true"
              height="588"
              border>
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="roleName" title="角色名称" width="240"></vxe-column>
        <vxe-column field="roleCode" title="角色代码"></vxe-column>
        <vxe-column field="level" title="角色等级" :formatter="formatterLevel"></vxe-column>
        <vxe-column field="des" title="角色简介"></vxe-column>
        <vxe-column title="操作" width="150">
          <template #default="{ row }">
            <el-button type="primary" size="mini" @click="edit(row)" style="margin-right: 15px">编辑</el-button>
            <el-popconfirm
                    title="确定删除吗？" @confirm="del(row)">
              <el-button type="danger" size="mini" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </vxe-column>
      </vxe-table>
    </el-col>
  </el-row>
</template>

<script>

  import {roleList, removeRole} from '@/api/operations-center/role'

  export default {
    name: "RoleList",
    data() {
      return {
        formInline: {
          keyword: '',
        },
        tableData: []
      }
    },
    methods: {
      /**
       * {搜索}
       *
       * @author: 宋康
       * @date: 2022/8/19 10:17
       */
      clickSelect() {
        roleList(this.formInline.keyword, true).then(res => {
          if (res.status) {
            this.tableData = res.data;
          }
        })
      },
      /**
       * {添加}
       *
       * @author: 宋康
       * @date: 2022/8/19 11:15
       */
      add() {
        this.$router.push({
          name: 'RoleAdd'
        })
      },
      /**
       * {编辑}
       *
       * @author: 宋康
       * @date: 2022/8/19 11:55
       */
      edit(row) {
        this.$router.push({
          name: 'RoleEdit',
          query: {
            id: row.id
          }
        })
      },
      /**
       * {删除}
       *
       * @author: 宋康
       * @date: 2022/8/19 15:18
       */
      del(row) {
        this.$alert(`确定删除【${row.roleName}】吗？`, '提示', {
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeRole(row.id).then(res => {
            if (res.status) {
              this.$XModal.alert({
                content: '删除成功',
                status: 'success',
              }).then(() => {
                this.clickSelect();
              })
            } else {
              this.$XModal.alert({
                content: res['msg'],
                status: 'error',
              })
            }
          })
        }).catch(() => {
        });
      },
      /**
       * {角色等级格式化}
       * @param cellValue
       * @author: 宋康
       * @date: 2022/8/22 14:03
       */
      formatterLevel({cellValue}) {
        switch (cellValue) {
          case '0':
            return '通用角色';
          case '1':
            return '授权角色';
          default:
            return '其他';
        }
      },
    },
    mounted() {
      this.clickSelect();
    }
  }
</script>

<style lang="scss" scoped>

</style>